<%--
  Created by IntelliJ IDEA.
  User: lixiaodong
  Date: 2018/4/23
  Time: 11:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<div class="tit01">
    <h3>关注我</h3>
    <div class="gzwm">
        <ul>
            <li><a class="qq" href="javascript:;" target="_blank">QQ</a></li>
            <li><a class="weixin" href="javascript:;" target="_blank">微信</a></li>
            <li><a class="github" href="https://github.com/cloudoer-L" target="_blank">GitHub</a></li>
            <li><a class="email" href="mailto:cloudoer@foxmail.com">邮箱</a></li>
        </ul>
    </div>
</div>
<!--tit01 end-->
<div class="ad300x100"> <img src="<%=basePath%>/jslibs/blog/images/ad300x100.jpg"> </div>
<div class="moreSelect" id="lp_right_select">
    <div class="ms-top">
        <ul class="hd" id="tab">
            <li class="cur"><a href="javascript:;">点击排行</a></li>
            <li><a href="javascript:;">最新文章</a></li>
            <li><a href="javascript:;">网友力荐</a></li>
        </ul>
    </div>
    <div class="ms-main" id="ms-main">
        <div style="display: block;" class="bd bd-news" >
            <ul id="east_browse"></ul>
        </div>
        <div  class="bd bd-news">
            <ul id="east_postdate"></ul>
        </div>
        <div class="bd bd-news">
            <ul id="east_endorse"></ul>
        </div>
    </div>
    <!--ms-main end -->
</div>
<!--切换卡 moreSelect end -->

<div class="cloud">
    <h3>标签云</h3>
    <ul>
        <li><a href="javascript:;">个人博客</a></li>
        <li><a href="javascript:;">web开发</a></li>
        <li><a href="javascript:;">前端设计</a></li>
        <li><a href="javascript:;">Html</a></li>
        <li><a href="javascript:;">CSS3</a></li>
        <li><a href="javascript:;">Html5+css3</a></li>
        <li><a href="javascript:;">百度</a></li>
        <li><a href="javascript:;">Javasript</a></li>
        <li><a href="javascript:;">web开发</a></li>
        <li><a href="javascript:;">前端设计</a></li>
        <li><a href="javascript:;">Html</a></li>
        <li><a href="javascript:;">CSS3</a></li>
        <li><a href="javascript:;">Html5+css3</a></li>
        <li><a href="javascript:;">百度</a></li>
    </ul>
</div>
<!--
<div class="tuwen">
    <h3>图文推荐</h3>
    <ul>
        <li><a href="javascript:;"><img src="<%=basePath%>/jslibs/blog/images/01.jpg"><b>住在手机里的朋友</b></a>
            <p>
                <span class="tulanmu">手机配件</span>
                <span class="tutime">2015-02-15</span>
            </p>
        </li>
    </ul>
</div>
-->
<div class="ad"> <img src="<%=basePath%>/jslibs/blog/images/03.jpg"> </div>
<div class="links">
    <h3><span>[<a href="javascript:;">申请友情链接</a>]</span>友情链接</h3>
    <ul>
        <li><a href="javascript:;">个人博客</a></li>
        <li><a href="javascript:;">web开发</a></li>
        <li><a href="javascript:;">前端设计</a></li>
        <li><a href="javascript:;">Html</a></li>
        <li><a href="javascript:;">CSS3</a></li>
        <li><a href="javascript:;">Html5+css3</a></li>
        <li><a href="javascript:;">百度</a></li>
    </ul>
</div>

<script type="text/javascript">
    var _visitor_east_js = {
        laytpl: null,
        layer:null,
        tab_bar_init:function () {
            var oLi = document.getElementById("tab").getElementsByTagName("li");
            var oUl = document.getElementById("ms-main").getElementsByTagName("div");
            for(var i = 0; i < oLi.length; i++){
                oLi[i].index = i;
                oLi[i].onmouseover = function ()
                {
                    for(var n = 0; n < oLi.length; n++) oLi[n].className="";
                    this.className = "cur";
                    for(var n = 0; n < oUl.length; n++) oUl[n].style.display = "none";
                    oUl[this.index].style.display = "block"
                }
            }
        },
        tab_init: function () {
            $.post('/article/getOrderBrowse.action',function (data) {
                var template = '{{#  layui.each(d, function(index, item){ }}' +
                    '<li><a href="/visitor/article.action?id={{ item.id }}">{{ item.title }}</a></li>' +
                    '{{#  }); }}';
                _visitor_east_js.laytpl(template).render(data.data, function(html){
                    $('#east_browse').html(html);
                });
            });
            $.post('/article/getOrderDate.action',function (data) {
                var template = '{{#  layui.each(d, function(index, item){ }}' +
                    '<li><a href="/visitor/article.action?id={{ item.id }}">{{ item.title }}</a></li>' +
                    '{{#  }); }}';
                _visitor_east_js.laytpl(template).render(data.data, function(html){
                    $('#east_postdate').html(html);
                });
            });
            $.post('/article/getOrderEndorse.action',function (data) {
                var template = '{{#  layui.each(d, function(index, item){ }}' +
                    '<li><a href="/visitor/article.action?id={{ item.id }}">{{ item.title }}</a></li>' +
                    '{{#  }); }}';
                _visitor_east_js.laytpl(template).render(data.data, function(html){
                    $('#east_endorse').html(html);
                });
            });
        },
        gzwm_init: function () {

            $('.qq').on('mouseover',function (e) {
                var that = this;
                _visitor_east_js.layer.tips('<img src="'+base_js.base_url+'/jslibs/blog/images/qq_r.jpg" style="width: 120px; height: 130px;">', that, {
                    tips: [3, 'transparent'],
                    time: 0
                });
            });

            $('.qq').on('mouseout',function (e) {
                _visitor_east_js.layer.close(_visitor_east_js.layer.index);
            });

            $('.weixin').on('mouseover', function () {
                var that = this;
                _visitor_east_js.layer.tips('<img src="'+base_js.base_url+'/jslibs/blog/images/weixin_r.png" style="width: 120px; height: 130px;">', that, {
                    tips: [3, 'transparent'],
                    time: 0
                });
            });

            $('.weixin').on('mouseout',function (e) {
                _visitor_east_js.layer.close(_visitor_east_js.layer.index);
            });
        }
    }

    var visitor_east_app = (function () {
        $(function () {
            layui.use(['laytpl','layer'], function () {
                _visitor_east_js.laytpl = layui.laytpl;
                _visitor_east_js.layer = layui.layer;

                _visitor_east_js.tab_init();
                _visitor_east_js.tab_bar_init();
                _visitor_east_js.gzwm_init();
            });
        });
    })();
</script>